<template>
    <div v-wechat-title="VueTitle">
        
        <div class="download-wrap">
            <div class="first-con">
                <div class="bg-1"></div>
                <div class="info-wrap">
                    <div class="download-logo">
                        <h2>{{platformConfig.platform_name}}APP</h2>
                    </div>
                    <div class="download-link">
                        <div class="download-qcode">
                            <img v-if="platformConfig && platformConfig.qrcode_url" :src="imgRequest + platformConfig.qrcode_url" alt="">
                        </div>
                        <div class="download-btn">
                            <a v-if="platformConfig.ios_line" :href="platformConfig.ios_line" class="ios" target="_blank"></a>
                            <a v-else href="javascript:void(0);" class="ios"></a>

                            <a v-if="platformConfig.android_line" :href="platformConfig.android_line" class="android" target="_blank"></a>
                            <a v-else href="javascript:void(0);" class="android"></a>
                        </div>
                    </div>
                    <div class="mobile-phone">
                        <img v-if="images && images.pc_photo_a" :src="images.pc_photo_a">
                        <img v-else src="../../assets/images/downLoad/first-phone.png">
                    </div>
                </div>
            </div>

            <div class="roll-wrap">
                <div class="bg"></div>
                <div class="roll-info">
                    <div class="Roll">
                        <img src="../../assets/images/downLoad/roll-tit.png" alt="">
                        <a href="javascript:void(0)" @click.prevent="custormAnchor('link')"></a>
                    </div>
                </div>
            </div>

            <div class="fixed-bg bg-2">
                <div id="link"></div>
            </div>
            <div class="con-wrap two-con">
                <div class="bg"></div>
                <div class="info-wrap">
                    <div class="mobile-phone">
                        <img v-if="images && images.pc_photo_b" :src="images.pc_photo_b">
                        <img v-else src="../../assets/images/downLoad/two-phone.png">
                    </div>
                    <div class="introduce">
                        <img src="../../assets/images/downLoad/two-tit.png" alt="">
                        <div class="icon-wrap">
                            <i class="icon-01"></i>
                            <i class="icon-02"></i>
                            <i class="icon-03"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="fixed-bg bg-3"></div>
            <div class="con-wrap three-con">
                <div class="bg"></div>
                <div class="info-wrap">
                    <div class="mobile-phone">
                        <img v-if="images && images.pc_photo_c" :src="images.pc_photo_c">
                        <img v-else src="../../assets/images/downLoad/three-phone.png">
                    </div>
                    <div class="introduce">
                        <img src="../../assets/images/downLoad/three-tit.png" alt="">
                        <div class="icon-wrap">
                            <i class="icon-01"></i>
                            <i class="icon-02"></i>
                            <i class="icon-03"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="fixed-bg bg-4"></div>
            <div class="con-wrap four-con">
                <div class="bg"></div>
                <div class="info-wrap">
                    <div class="mobile-phone">
                        <img v-if="images && images.pc_photo_d" :src="images.pc_photo_d">
                        <img v-else src="../../assets/images/downLoad/four-phone.png">
                    </div>
                    <div class="introduce">
                        <img src="../../assets/images/downLoad/four-tit.png" alt="">
                        <div class="icon-wrap">
                            <i class="icon-01"></i>
                            <i class="icon-02"></i>
                            <i class="icon-03"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-6 last-con">
                <div class="info-wrap">
                    <div class="download-link">
                        <div class="download-qcode">
                            <img v-if="platformConfig && platformConfig.qrcode_url" :src="imgRequest + platformConfig.qrcode_url" alt="">
                        </div>
                        <div class="download-btn">
                            <a v-if="platformConfig.ios_line" :href="platformConfig.ios_line" class="ios" target="_blank"></a>
                            <a v-else href="javascript:void(0);" class="ios"></a>

                            <a v-if="platformConfig.android_line" :href="platformConfig.android_line" class="android" target="_blank"></a>
                            <a v-else href="javascript:void(0);" class="android"></a>
                        </div>
                    </div>
                    <div class="introduce">
                        <img src="../../assets/images/downLoad/last-tit.png" alt="">
                    </div>
                </div>
            </div>


        </div>
        
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
    data() {
        return {
            VueTitle: "手机APP", //页面标题
            images: {},
        };
    },
    created() {
        
    },
    mounted() {
        window.addEventListener('scroll', this.lazyLoad); //滚动懒加载
        this._getImage();
    },
    computed: {
        ...mapGetters(['platformConfig'])
    },
    methods: {
        _getImage() {
            this.$http.post(this.urlRequest + "?m=api&c=lobbynew&a=download_page&type=3").then(res => {
                if (res.data.status == 0) {
                    this.images = res.data.data
                }
                console.log('图片：', this.images)
            })
        },
        lazyLoad(e) { //滚动懒加载
            var conWrap = document.getElementsByClassName('con-wrap');
            var len = conWrap.length;
            var n = 0; //存储加载到的位置，避免每次都从第一个开始遍历
            var seeHeight = document.documentElement.clientHeight;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            for (var i = n; i < len; i++) {
                if (conWrap[i].offsetTop < seeHeight + scrollTop) {
                    if(conWrap[i].className.indexOf("active") == -1) {
                        conWrap[i].className += ' active';
                        n = i + 1;
                    }
                    // console.log('n = ' + n);
                }
            }
        },
        
        custormAnchor(anchorName) { //锚点
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { //如果对应id的锚点存在，就跳转到锚点
                anchorElement.scrollIntoView();
            }
        }
    },
    watch: {
        
    }
};
</script>
<style scoped>
.download-wrap {
    position: relative;
    width: 100%;
    max-width: 1920px;
    min-width: 1200px;
    overflow: hidden;
}
.bg-1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 694px;
    /* background: url('../../assets/images/downLoad/bg1.png') no-repeat center top; */
    animation: imgScale 3s ease-in-out infinite;
}
.download-logo {
    width: 416px;
    height: 168px;
    /* background: url('../../assets/images/downLoad/logo.png') no-repeat bottom; */
    position: absolute;
    left: 76px;
    top: 150px;
}
.download-logo h2 {
    text-align: center;
    color: #fff;
    font-size: 48px;
    line-height: 66px;
    font-weight: 400;
}
.download-link {
    position: absolute;
    overflow: hidden;
    width: 305px;
    height: 123px;
}
.download-link .download-qcode {
    float: left;
    width: 122px;
    height: 122px;
    padding: 10px;
    background: #eee;
    border: 1px solid #fff;
}
.download-link .download-qcode img {
    width: 100px;
    height: 100px;
}
.download-link .download-btn {
    width: 167px;
    float: right;
    margin-top: 5px;
}
.download-link .download-btn a {
    display: block;
}
.download-link .download-btn a.ios {
    width: 167px;
    height: 51px;
    /* background: url('../../assets/images/downLoad/btn-ios.png') no-repeat left top; */
}
.download-link .download-btn a.android {
    width: 165px;
    height: 49px;
    margin: 12px 0 0 1px;
    /* background: url('../../assets/images/downLoad/btn-android.png') no-repeat left top; */
}
.download-link .download-btn a:hover {
    background-position: right top;
}


.roll-wrap {
    height: 446px;
    position: relative;
    margin-top: -179px;
    z-index: 2;
}
.roll-wrap .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: url('../../assets/images/downLoad/con-bg1.png') no-repeat center; */
    z-index: 1;
}
.roll-wrap .roll-info {
    height: 446px;
    overflow: hidden;
}
.Roll {
    width: 393px;
    height: 90px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin: 200px auto 0;
}
.Roll img {
    margin-bottom: 12px;
}
.Roll a {
    display: inline-block;
    width: 41px;
    height: 40px;
    position: relative;
    /* background: url('../../assets/images/downLoad/arrow-down.png') no-repeat left center; */
    animation: arrowDown 1.8s infinite ease-in-out;
}

.fixed-bg {
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}
.bg-2, .bg-3, .bg-4, .bg-5 {
    height: 695px;
}
.bg-3, .bg-4, .bg-5, .bg-6 {
    margin-top: -183px;
}
.bg-2 {
    margin-top: -192px;
    /* background-image: url('../../assets/images/downLoad/bg2.png'); */
}
.bg-3 {
    /* background-image: url('../../assets/images/downLoad/bg3.png'); */
}
.bg-4 {
    /* background-image: url('../../assets/images/downLoad/bg4.png'); */
}
.bg-5 {
    /* background-image: url('../../assets/images/downLoad/bg5.png'); */
}
.bg-6 {
    height: 629px;
    /* background: url('../../assets/images/downLoad/bg6.png') no-repeat center top; */
}
.con-wrap {
    position: relative;
    height: 689px;
    text-align: center;
    margin-top: -183px;
}
.con-wrap .bg {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('../../assets/images/downLoad/con-bg.png') no-repeat center top; */
}
.con-wrap .info-wrap {
    z-index: 2;
    height: 689px;
}
.info-wrap {
    position: relative;
    margin: 0 auto;
    width: 1100px;
}
.mobile-phone {
    position: absolute;
    z-index: 10;
}
.icon-wrap {
    margin-top: 27px;
    width: 611px;
}
.icon-wrap i {
    display: inline-block;
    width: 114px;
    height: 114px;
    margin: 0 22px;
    cursor: default;
}

.first-con {
    height: 694px;
    position: relative;
}
.first-con .download-link {
    left: 134px;
    top: 349px;
}
.first-con .mobile-phone {
    width: 366px;
    height: 673px;
    top: 30px;
    right: 30px;
    animation:fadeIn 1s both;
    animation-delay: .5s;
}
.first-con .mobile-phone img {
    width: 366px;
    height: 673px;
}

.two-con .mobile-phone {
    width: 485px;
    height: 534px;
    bottom: 110px;
    left: -15px;
}
.two-con .mobile-phone img {
    width: 485px;
    height: 534px;
}
.two-con .introduce {
    width: 668px;
    float: right;
    margin: 151px -48px 0 0;
}
.two-con .icon-wrap {
    margin-left: 24px;
}
.two-con .icon-wrap .icon-01 {
    /* background: url('../../assets/images/downLoad/two-icon-01.png') no-repeat; */
}
.two-con .icon-wrap .icon-02 {
    /* background: url('../../assets/images/downLoad/two-icon-02.png') no-repeat; */
}
.two-con .icon-wrap .icon-03 {
    /* background: url('../../assets/images/downLoad/two-icon-03.png') no-repeat; */
}

.three-con .mobile-phone {
    width: 514px;
    height: 553px;
    bottom: 53px;
    right: 77px;
}
.three-con .mobile-phone img {
    width: 514px;
    height: 553px;
}
.three-con .introduce {
    width: 608px;
    float: left;
    margin: 121px 0 0 -66px;
}
.three-con .icon-wrap {
    margin-left: -10px;
}
.three-con .icon-wrap .icon-01 {
    /* background: url('../../assets/images/downLoad/three-icon-01.png') no-repeat; */
}
.three-con .icon-wrap .icon-02 {
    /* background: url('../../assets/images/downLoad/three-icon-02.png') no-repeat; */
}
.three-con .icon-wrap .icon-03 {
    /* background: url('../../assets/images/downLoad/three-icon-03.png') no-repeat; */
}

.four-con .mobile-phone {
    width: 514px;
    height: 595px;
    left: -10px;
    top: -13px;
}
.four-con .mobile-phone img {
    width: 514px;
    height: 595px;
}
.four-con .introduce {
    width: 678px;
    float: right;
    margin: 140px -52px 0 0;
    position: relative;
    z-index: 1;
}
.four-con .icon-wrap {
    margin-left: 15px;
}
.four-con .icon-wrap .icon-01 {
    /* background: url('../../assets/images/downLoad/four-icon-01.png') no-repeat; */
}
.four-con .icon-wrap .icon-02 {
    /* background: url('../../assets/images/downLoad/four-icon-02.png') no-repeat; */
}
.four-con .icon-wrap .icon-03 {
    /* background: url('../../assets/images/downLoad/four-icon-03.png') no-repeat; */
}

.last-con .download-link {
    top: 209px;
    left: 346px;
}
.last-con .introduce {
    width: 524px;
    position: absolute;
    left: 251px;
    top: 422px;
}

.active .mobile-phone {
    animation:fadeIn 1s both;
    animation-delay: .5s;
}
.active .icon-wrap i {
    animation:zoomIn 1s both;
    animation-delay: .5s;
}
.active .icon-wrap i:nth-of-type(2) {
    animation-delay: .8s;
}
.active .icon-wrap i:nth-of-type(3) {
    animation-delay: 1s;
}
@keyframes arrowDown {
    0%   {
        transform: translate(0,-15px);
    }
    50%  {
        transform: translate(0,0);
    }
    100% {
        transform: translate(0,-15px);
    }
}
@keyframes imgScale {
	0%   { transform: scale( 1 ); }
	50%  { transform: scale( 1.05 ); }
	100% { transform: scale( 1 );  }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
    to   {
        opacity: 1
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }
    50%  {
        opacity: 1
    }
}
</style>


// WEBPACK FOOTER //
// src/components/downLoad/downLoad.vue